<template>
<div class="advanced-search-box">
    <Form
      :model="searchForm"
      ref="searchForm"
      label-position="left"
      :label-width="120"
    >
    <div v-if="createbtnShow && fromPage == 'creater'">
      <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border: none">
            <Form-item :label="'业务单元：'" v-if="createbtnShow && !useApiGetData">
              <Select transfer filterable clearable v-model="searchForm.code">
                <Option @click.native="codeChange(item)" v-for="item in planLevels" :value="item.vsiValue" :key="item.key">{{
                  item.vsiValue
                }}</Option>
              </Select>
            </Form-item>
            <Form-item :label="'业务单元：'" v-if="createbtnShow && useApiGetData">
              <Select transfer filterable clearable v-model="searchForm.code">
                <Option @click.native="codeChange(item)" v-for="item in planLevels" :value="item.trgNode" :key="item.trgNode">{{
                  item.trgNode
                }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="12" style="border: none">
            <Form-item :label="'举措大类：'">
              <Select transfer v-model="searchForm.stype" clearable>
                <Option @click.native="stypeChange(item)" v-for="item in advancedCategoryInitiatives" :value="item.vsiValue" :key="item.vsiValue">{{
                  item.vsiValue
                }}</Option>
              </Select>
            </Form-item>
          </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border: none">
            <Form-item :label="'举措细类：'">
              <Select transfer v-model="searchForm.mtype" clearable>
                <Option v-for="item in advancedDetailsInitiatives" :value="item.vsiValue" :key="item.vsiValue">{{
                  item.vsiValue
                }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="12" style="border: none">
            <Form-item v-if="fromPage == 'creater'" :label="'状态：'">
              <Select transfer v-model="searchForm.wfStatus" clearable>
                <Option v-for="item in processStatusList" :value="item.value" :key="item.value">{{
                  item.text
                }}</Option>
              </Select>
            </Form-item>
          </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border: none">
            <Form-item v-if="fromPage == 'creater'" :label="'数据范围：'">
              <Select transfer v-model="searchForm.allDataFlag" clearable>
                <Option v-for="item in allDataFlagList" :value="item.value" :key="item.value">{{
                  item.text
                }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="12" style="border: none">
            <Form-item :label="'关键任务：'">
              <Select transfer v-model="searchForm.taskdesc" clearable>
                <Option v-for="item in taskdescList" :value="item.value" :key="item.value">{{
                  item.text
                }}</Option>
              </Select>
            </Form-item>
          </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border: none">
            <Form-item
            prop="startStringDate"
            label="计划开始时间：">
              <DatePicker transfer :editable = false  @on-change="startStringDateChange" :options="optionss" v-model="searchForm.startStringDate" type="month" placeholder="请选择"  style="width: 100%"/>
            </Form-item>
          </Col>
          <Col span="12" style="border: none">
            <Form-item
            prop="endStringDate"
            label="计划完成时间：">
              <DatePicker transfer :editable = false  @on-change="endStringDateChange" :options="optionss" v-model="searchForm.endStringDate" type="month" placeholder="请选择"  style="width: 100%"/>
            </Form-item>
          </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border: none">
            <div class="Selecequarters" >
              <Form-item prop="year" label="季度：" style="width:240px; margin-right: 0px;">
                <DatePicker transfer clearable :editable = false type="year" v-model="year" :options="optionss"  placeholder="请选择" style="width: 120px;"/>
              </Form-item>
              <span style="margin: 8px;">-</span>
              <Form-item prop="reason" style="width:120px" :label-width="0">
                <Select transfer clearable v-model="reason" placeholder="请选择" style="width: 100px;">
                  <Option  v-for="item in reasons"  :key="item.key" :value="item.value">{{item.value}}</Option>
                </Select>
              </Form-item >
            </div>
          </Col>
          <Col span="12" style="border: none">
            <Form-item :label="'当前状态：'">
              <Select transfer v-model="searchForm.currentStatus" clearable>
                <Option v-for="item in currentStatusList" :value="item.value" :key="item.value">{{
                  item.text
                }}</Option>
              </Select>
            </Form-item>
          </Col>
      </Row>
    </div>
    <div v-if="fromPage == 'Summary'">
      <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border: none">
            <Form-item :label="'举措大类：'">
              <Select transfer v-model="searchForm.stype" clearable>
                <Option @click.native="stypeChange(item)" v-for="item in advancedCategoryInitiatives" :value="item.vsiValue" :key="item.vsiValue">{{
                  item.vsiValue
                }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="12" style="border: none">
            <Form-item :label="'举措细类：'">
              <Select transfer v-model="searchForm.mtype" clearable>
                <Option v-for="item in advancedDetailsInitiatives" :value="item.vsiValue" :key="item.vsiValue">{{
                  item.vsiValue
                }}</Option>
              </Select>
            </Form-item>
          </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border: none">
            <Form-item :label="'关键任务：'">
              <Select transfer v-model="searchForm.taskdesc" clearable>
                <Option v-for="item in taskdescList" :value="item.value" :key="item.value">{{
                  item.text
                }}</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="12" style="border: none">
            <Form-item :label="'当前状态：'">
              <Select transfer v-model="searchForm.currentStatus" clearable>
                <Option v-for="item in currentStatusList" :value="item.value" :key="item.value">{{
                  item.text
                }}</Option>
              </Select>
            </Form-item>
          </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border: none">
            <Form-item
            prop="startDate"
            label="计划开始时间：">
              <DatePicker transfer :editable = false  @on-change="startDateChange" :options="optionss" v-model="searchForm.startDate" type="month" placeholder="请选择"  style="width: 100%;"/>
            </Form-item>
          </Col>
          <Col span="12" style="border: none">
            <Form-item
            prop="endDate"
            label="计划完成时间：">
              <DatePicker transfer :editable = false  @on-change="endDateChange" :options="optionss" v-model="searchForm.endDate" type="month" placeholder="请选择"  style="width: 100%;"/>
            </Form-item>
          </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
          <Col span="12" style="border: none">
            <div class="Selecequarters" >
              <Form-item prop="year" label="季度：" style="width:240px; margin-right: 0px;">
                <DatePicker transfer clearable :editable = false type="year" v-model="year" :options="optionss"  placeholder="请选择" style="width: 120px;"/>
              </Form-item>
              <span style="margin: 8px;">-</span>
              <Form-item prop="reason" style="width:120px" :label-width="0">
                <Select transfer clearable v-model="reason" placeholder="请选择" style="width: 100px;">
                  <Option  v-for="item in reasons"  :key="item.key" :value="item.value">{{item.value}}</Option>
                </Select>
              </Form-item >
            </div>
          </Col>
      </Row>
    </div>
    </Form>
    <div class="foot-btn-box">
      <RPButton btnType="default" text="取消" @click="handleClose"/>
      <RPButton btnType="default" text="重置" @click="handleReset"/>
      <RPButton optType="create" type="info" text="确定" @click="handleSubmit"/>
    </div>
</div>

</template>

<script>

let defaultObject= {
  allDataFlag: "0",
  code: '',
  currentStatus: '',
  endDate: '',
  endStringDate: '',
  fromPage: '',
  mtype: '',
  parentCode: '',
  startDate: '',
  stype: '',
  taskQuarter: '',
  taskdesc: '',
  wfStatus: ''
}
export default {
  name: 'advancedSearch',
  props: {
    advanceSearchForm: {
      type: Object,
      default: () => {}
    },
    planLevels: {
      type: Array,
      default: () => []
    },
    categoryInitiatives: {
      type: Array,
      default: () => []
    },
    detailsInitiatives: {
      type: Array,
      default: () => []
    },
    processStatusList: {
      type: Array,
      default: () => []
    },
    allDataFlagList: {
      type: Array,
      default: () => []
    },
    createbtnShow: {
      type: Boolean,
      default: true
    },
    useApiGetData: {
      type: Boolean,
      default: true
    },
    fromPage: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      reason:'',
      reasons:[
        {text: '1', value: '1'},
        {text: '2', value: '2'},
        {text: '3', value: '3'},
        {text: '4', value: '4'}
      ],
      year:'',
      searchForm: {},
      advancedCategoryInitiatives:[],
      advancedDetailsInitiatives:[],
      taskdescList:[
        {text: '是', value: '是'},
        {text: '否', value: '否'},
        {text: '--', value: '--'}
      ],
      currentStatusList: [
        {text: '未启动', value: '未启动'},
        {text: '正常进行', value: '正常进行'},
        {text: '超额推进', value: '超额推进'},
        {text: '延期进行', value: '延期进行'},
        {text: '已完成', value: '已完成'},
        {text: '--', value: '--'}
      ],
      optionss:{
        disabledDate(date){
          const disabledDate = date.getFullYear()
          return ( disabledDate > 2025 || disabledDate < 2021 )
      }
     },
    }
  },
  created() {
     this.$emit("SetTitle", "高级筛选");
     this.$emit("SetPageMinHeight", 200);
     this.$emit("SetPageWidth", 800);
    //  this.$emit("SetPageActions", [
    //   {
    //     text: '取消',
    //     handle: () => {
    //       this.$emit("Close",false);
    //     }
    //   },
    //   {
    //     text: '重置',
    //     handle: () => {
    //       this.reset();
    //     }
    //   },
    //   {
    //     text: '确定',
    //     theme: "warning",
    //     handle: () => {
    //       this.advancedSearch();
    //     }
    //   },
    // ]);
     this.advancedCategoryInitiatives = this.categoryInitiatives
     this.advancedDetailsInitiatives = this.detailsInitiatives
     this.searchForm = Object.assign({}, this.advanceSearchForm) 
     if (this.searchForm.taskQuarter){
        const tq = this.searchForm.taskQuarter.split('-',2)
        this.year = new Date(tq[0])
        this.reason = tq[1]
     } else{
        this.year = ''
        this.reason = ''
     }
  },
  mounted() {
  },
  watch: {
    'searchForm.stype': {
      handler(val) {
        if (!val) {
          this.advancedDetailsInitiatives = []
          this.searchForm.mtype = ''
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("Close",false);
    },
    handleReset() {
      this.searchForm = {
        ...defaultObject,
        allDataFlag:this.allDataFlagList[0].value,
        code: this.advanceSearchForm.code,
        fromPage: this.advanceSearchForm.fromPage
      }
      this.reason = ''
      this.year = ''
      this.advancedDetailsInitiatives = []
    },
    handleSubmit() {
      this.advancedSearch();
    },
    advancedSearch(){
      if(this.year && this.reason){
        let yearDate = this.year.getFullYear()
        this.searchForm.taskQuarter = yearDate + '-' + this.reason
      }else {
        this.searchForm.taskQuarter = ''
      }
      this.$emit("Close",this.searchForm)
    },
    codeChange(list) {
      if (!this.useApiGetData) {
        this.advancedCategoryInitiatives = list.children
        this.searchForm.stype = ''
        this.advancedDetailsInitiatives = []
        this.searchForm.mtype = ''
      }
    },
    stypeChange(list) {
      this.advancedDetailsInitiatives = list.children
      this.searchForm.mtype = ''
    },
    startStringDateChange(val) {
      if (val){
        if (this.searchForm.endStringDate && new Date(this.searchForm.endStringDate).Format('yyyy-MM') < val ) {
          this.$Message.error({
            content: '计划完成时间不能早于计划开始时间',
            duration: 3
          });
          this.searchForm.startStringDate = ''
        }else {
          this.searchForm.startStringDate = this.searchForm.startStringDate.Format('yyyy-MM')
        }
      }else {
        this.searchForm.startStringDate = ''
      }
    },
    endStringDateChange(val) {
      if (val){ 
        if (this.searchForm.startStringDate && new Date(this.searchForm.startStringDate).Format('yyyy-MM') > val ) {
          this.$Message.error({
            content: '计划完成时间不能早于计划开始时间',
            duration: 3
          });
          this.searchForm.endStringDate = ''
        } else{
          this.searchForm.endStringDate = this.searchForm.endStringDate.Format('yyyy-MM')
        }
      }else {
        this.searchForm.endStringDate = ''
      }
    },
    startDateChange(val) {
      if (val){
        if (this.searchForm.endDate && new Date(this.searchForm.endDate).Format('yyyy-MM') < val ) {
          this.$Message.error({
            content: '计划完成时间不能早于计划开始时间',
            duration: 3
          });
          this.searchForm.startDate = ''
        }else {
          this.searchForm.startDate = this.searchForm.startDate.Format('yyyy-MM')
        }
      }else {
        this.searchForm.startDate = ''
      }
    },
    endDateChange(val) {
      if (val){ 
        if (this.searchForm.startDate && new Date(this.searchForm.startDate).Format('yyyy-MM') > val ) {
          this.$Message.error({
            content: '计划完成时间不能早于计划开始时间',
            duration: 3
          });
          this.searchForm.endDate = ''
        } else{
          this.searchForm.endDate = this.searchForm.endDate.Format('yyyy-MM')
        }
      }else {
        this.searchForm.endDate = ''
      }
    },
  }
}
</script>
<style lang="less" scoped>
.advanced-search-box {
  .foot-btn-box {
    padding-top: 30px;
    text-align: right;
    button {
      margin-left: 10px;
    }
    .primary-button {
        color: #fff;
        background-color: #ff6f4b;
        border-color: #ff6f4b;
        font-size: 80;
    }
  }
  /deep/.core-modal-footer {
    padding: 0;
  }
  
  .Selecequarters{
    display:flex;
    
  
    /deep/.ivu-form-item-content{
          margin-left: 2px;
          width: 200px;
  
    }
  }
}
</style>

